<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="860px" draggable>
    <template #header>
      <div class="my-header">
        <el-text class="mr20 fsize16">
          {{ dialogProps.title }}({{ dialogProps.goodsInfo.name }}-{{ dialogProps.goodsInfo.foodSpecName }})
        </el-text>
      </div>
      <hr style="border: 1px solid #fafafa" />
    </template>
    <div class="height400">
      <ProTable
        ref="batchingTable"
        title="配料列表"
        row-key="id"
        :columns="batchingColumns"
        :data="dialogProps.tableData"
        :pagination="false"
        :tool-button="false"
      >
        <!-- <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" :disabled="FoodSpecId === 0" @click="openSelectTreeTable('选择原料')">
            新增原料
          </el-button>
          <el-button type="primary" :disabled="FoodSpecId === 0" @click="onSave"> 保存 </el-button>
        </template> -->
        <template #quantity="scope">
          <el-input-number class="w100" v-model="scope.row.quantity" :min="0.01" :controls="false" />
        </template>
        <template #operation="{ $index }">
          <el-icon color="#efb74b" style="cursor: pointer" @click="onDelete($index)"><Delete /></el-icon>
        </template>
      </ProTable>
    </div>
    <SelectTreeTable @selected-list="handleSelectedTreeList" ref="selectTreeTableRef" />
    <template #footer>
      <el-row type="flex" justify="space-between">
        <div>
          <el-button type="primary" :icon="CirclePlus" :disabled="FoodSpecId === 0" @click="openSelectTreeTable('选择原料')">
            设置原料
          </el-button>
        </div>
        <div>
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit"> 保存 </el-button>
        </div>
      </el-row>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="IngredientDialog">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { Product, Goods } from "@/api/interface";
import { CirclePlus } from "@element-plus/icons-vue";
import SelectTreeTable from "@/components/SelectTreeData/index.vue";
import { getWaresCategoryList, getWaresList } from "@/api/modules/inventory";

interface DrawerProps {
  title: string;
  isView: boolean;
  goodsInfo: Partial<Goods.ResGoodsList>;
  tableData: any[];
  api?: (params: any) => Promise<any>;
}

const dialogVisible = ref(false);
const dialogProps = ref<DrawerProps>({
  isView: false,
  title: ""
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
};

const batchingColumns: ColumnProps<Product.ResProductList>[] = [
  { prop: "barcode", label: "条码", align: "left" },
  { prop: "productName", label: "规格", align: "left" },
  { prop: "unitName", label: "单位", align: "left" },
  { prop: "goodsName", label: "名称", align: "left" },
  { prop: "quantity", label: "数量", align: "left" },
  { prop: "operation", label: "删除", align: "center", width: 60 }
];

const handleSelectedTreeList = (val: any) => {
  dialogProps.value.tableData = val.list.map(im => {
    return {
      goodsName: im.name,
      goodsId: im.id,
      foodId: dialogProps.value.goodsInfo.id,
      goodsProductId: im.prodcutId,
      foodSpecId: dialogProps.value.goodsInfo.foodSpecId,
      isDefault: 0,
      productName: im.productName,
      unitName: im.unitName,
      quantity: 1,
      barcode: im.barcode
    };
  });
};

const selectTreeTableRef = ref<InstanceType<typeof SelectTreeTable> | null>(null);
const openSelectTreeTable = (title: string) => {
  const params = {
    title,
    isView: false,
    index: 0,
    selTags: dialogProps.value.tableData.map(i => {
      i.name = `${i.goodsName}`;
      i.id = i.goodsProductId;
      return i;
    }),
    columns: [
      { type: "selection", width: 80 },
      { prop: "barcode", label: "条码", align: "left" },
      { prop: "name", label: "名称", align: "left" },
      { prop: "unitName", label: "单位", align: "left" },
      { prop: "productName", label: "规格", align: "left" }
    ],
    idName: "goodsCategoryId",
    mate: "prodcutId",
    treeApi: getWaresCategoryList,
    api: getWaresList
  };
  selectTreeTableRef.value?.acceptParams(params);
};

// 提交数据（新增/编辑）
const handleSubmit = async () => {
  try {
    await dialogProps.value.api!({
      foodSpecId: dialogProps.value.goodsInfo.foodSpecId,
      foodSetList: dialogProps.value.tableData
    });
    ElMessage.success({ message: `编辑原料配比成功！` });
    dialogVisible.value = false;
  } catch (error) {
    console.log(error);
  }
};

const onDelete = index => {
  // console.log(index);
  dialogProps.value.tableData.splice(index, 1);
};

defineExpose({
  acceptParams
});
</script>
<style lang="scss" scoped></style>
